<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示生命周期</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    {{title}}<br/>
    <button @click="changeTitle">修改标题</button>
    <button @click="destroy">手动销毁组件</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: '原标题'
        },
        methods: {
            changeTitle: function () {
                this.title = "新标题";
            },
            destroy:function (){
                this.$destroy();
            }
        },
        // 演示生命周期函数
        beforeCreate: function () {
            console.log("beforeCreate");
        },
        created: function () {
            console.log("created");
        },
        beforeMount: function () {
            console.log("beforeMount");
        },
        mounted: function () {
            console.log("mounted");
        },
        beforeUpdate: function () {
            console.log("beforeUpdate");
        },
        updated: function () {
            console.log("updated");
        },
        beforeDestroy: function () {
            console.log("beforeDestroy");
        },
        destroyed: function () {
            console.log("destroy");
        }
    });
</script>
</body>
</html>